<!-- 首页，支持店铺装修 -->
<template>
  <view v-if="template">
    <s-layout
      title="首页"
      navbar="custom"
      tabbar="/pages/index/index"
      :bgStyle="template.page"
      :navbarStyle="template.navigationBar"
      onShareAppMessage
    >
      <s-block
        v-for="(item, index) in template.components"
        :key="index"
        :styles="item.property.style"
      >
        <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
      </s-block>

      <!-- 同学状态展示组件 -->
      <view class="student-status-container">
        <!-- 加载状态 -->
        <view v-if="isLoading" class="loading-container">
          <view class="loading-spinner"></view>
          <text class="loading-text">正在获取学车进度...</text>
        </view>

        <!-- 未报名状态 -->
        <view v-else-if="!hasExamData" class="no-exam-container" @click="goToSignUp">
          <view class="no-exam-icon">🚗</view>
          <view class="no-exam-title">同学，请尽快报名</view>
          <view class="no-exam-subtitle">开启您的学车之旅</view>
          <view class="signup-btn">
            <text class="btn-text">立即报名</text>
            <text class="btn-arrow">→</text>
          </view>
        </view>

        <!-- 已完成状态 -->
        <view v-else-if="isCompleted" class="completed-container" @click="goToCategory">
          <view class="completed-icon">🎉</view>
          <view class="completed-title">恭喜完成全部课程</view>
          <view class="completed-subtitle">快去挑选喜欢的车吧！</view>
          <view class="category-btn">
            <text class="btn-text">选购爱车</text>
            <text class="btn-arrow">→</text>
          </view>
        </view>

        <!-- 已报名状态 -->
        <view v-else>
          <view class="status-header">
            <view class="status-title">
              <text class="title-icon">🎯</text>
              <text class="title-text">我的学车进度</text>
            </view>
            <view class="progress-percentage">{{ Math.round((userStage / stageNames.length) * 100) }}%</view>
          </view>

          <view class="status-progress">
            <view class="progress-bar">
              <view
                class="progress-fill"
                :style="{ width: (userStage / stageNames.length) * 100 + '%' }"
              ></view>
            </view>
          </view>

          <view class="stages-container">
            <view
              v-for="(stage, index) in stages"
              :key="index"
              class="stage-item"
              :class="{ 'completed': stage.completed, 'current': index + 1 === userStage }"
            >
              <view class="stage-circle">
                <text v-if="stage.completed" class="check-icon">✓</text>
                <text v-else class="stage-number">{{ index + 1 }}</text>
              </view>
              <view class="stage-name">{{ stage.name }}</view>
              <view v-if="index < stages.length - 1" class="stage-line"></view>
            </view>
          </view>

          <view class="status-tips">
            <view class="tip-item">
              <text class="tip-icon">💪</text>
              <text class="tip-text">{{ getCurrentTip() }}</text>
            </view>
          </view>
        </view>

      </view>
    </s-layout>
  </view>
</template>

<script setup>
  import { computed, ref, onMounted } from 'vue';
  import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import $share from '@/sheep/platform/share';
  import UserApi from '@/sheep/api/member/user';

  // 同学状态相关数据
  const stageNames = ['已报名', '科目一', '科目二', '科目三', '科目四', '已完成'];
  const userStage = ref(0); // 从后端获取
  const hasExamData = ref(false); // 是否有驾考数据
  const isLoading = ref(false); // 加载状态

  const stages = computed(() => {
    return stageNames.map((name, index) => ({
      name,
      completed: (index + 1) <= userStage.value
    }));
  });

  // 获取当前提示信息
  const getCurrentTip = () => {
    const tips = [
      '恭喜报名成功！开始您的学车之旅吧！',
      '理论学习阶段，加油背题！',
      '场地练习阶段，熟练掌握技巧！',
      '路考阶段，注意安全驾驶！',
      '最后理论课程，加油！',
      '恭喜完成全部课程！'
    ];
    return tips[userStage.value - 1] || tips[0];
  };

  // 获取用户驾考状态
  const getExamUserStatus = async () => {
    try {
      isLoading.value = true;
      const { data, code } = await UserApi.getExamUserStatus();
      if (code === 0 && data) {
        hasExamData.value = true;
        userStage.value = data.currentStage + 1; // 后端返回0-5，前端显示1-6
      } else {
        hasExamData.value = false;
      }
    } catch (error) {
      console.log('获取驾考状态失败:', error);
      hasExamData.value = false;
    } finally {
      isLoading.value = false;
    }
  };

  // 判断是否已完成全部课程
  const isCompleted = computed(() => {
    return hasExamData.value && userStage.value > 5; // currentStage > 4，即 currentStage >= 5
  });

  // 跳转到报名页面
  const goToSignUp = () => {
    sheep.$router.go('/pages/goods/index?id=657');
  };

  // 跳转到卖车页面（选车）
  const goToCategory = () => {
    uni.switchTab({
      url: '/pages/index/sale'
    });
  };

  // 测试跳转到教练详情页面
  const goToCoachDetail = () => {
    sheep.$router.go('/pages/coach/simple?id=657'); // 使用简化版本
  };
  // 隐藏原生tabBar
  uni.hideTabBar({
    fail: () => {},
  });

  const template = computed(() => sheep.$store('app').template?.home);
  // 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
  // (async function() {
  // console.log('原代码首页定制化数据',template)
  // let {
  // 	data
  // } = await index2Api.decorate();
  // console.log('首页导航配置化过高无法兼容',JSON.parse(data[1].value))
  // 改变首页底部数据 但是没有通过数组id获取商品数据接口
  // let {
  // 	data: datas
  // } = await index2Api.spids();
  // template.value.data[9].data.goodsIds = datas.list.map(item => item.id);
  // template.value.data[0].data.list = JSON.parse(data[0].value).map(item => {
  // 	return {
  // 		src: item.picUrl,
  // 		url: item.url,
  // 		title: item.name,
  // 		type: "image"
  // 	}
  // })
  // }())

  onLoad((options) => {
    // #ifdef MP
    // 小程序识别二维码
    if (options.scene) {
      const sceneParams = decodeURIComponent(options.scene).split('=');
      console.log('sceneParams=>', sceneParams);
      options[sceneParams[0]] = sceneParams[1];
    }
    // #endif

    // 预览模板
    if (options.templateId) {
      sheep.$store('app').init(options.templateId);
    }

    // 解析分享信息
    if (options.spm) {
      $share.decryptSpm(options.spm);
    }

    // 进入指定页面(完整页面路径)
    if (options.page) {
      sheep.$router.go(decodeURIComponent(options.page));
    }

    // 获取用户驾考状态
    getExamUserStatus();
  });

  // 下拉刷新
  onPullDownRefresh(() => {
    sheep.$store('app').init();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 800);
  });

  onPageScroll(() => {});
</script>

<style lang="scss" scoped>
.student-status-container {
  margin: 30rpx 20rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: shimmer 3s ease-in-out infinite;
  }
}

@keyframes shimmer {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
}

/* 加载状态样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 0;
  position: relative;
  z-index: 2;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid rgba(255,255,255,0.3);
  border-top: 4rpx solid #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20rpx;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  color: #ffffff;
  font-size: 28rpx;
  text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.2);
}

/* 未报名状态样式 */
.no-exam-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 40rpx;
  position: relative;
  z-index: 2;
  cursor: pointer;
  transition: transform 0.3s ease;

  &:active {
    transform: scale(0.98);
  }
}

.no-exam-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10rpx); }
  60% { transform: translateY(-5rpx); }
}

.no-exam-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 12rpx;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
}

.no-exam-subtitle {
  font-size: 28rpx;
  color: rgba(255,255,255,0.8);
  margin-bottom: 40rpx;
  text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.2);
}

.signup-btn {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
  padding: 20rpx 40rpx;
  border-radius: 50rpx;
  box-shadow: 0 8rpx 24rpx rgba(79, 172, 254, 0.4);
  transition: all 0.3s ease;

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 4rpx 12rpx rgba(79, 172, 254, 0.4);
  }
}

.btn-text {
  color: #ffffff;
  font-size: 30rpx;
  font-weight: 600;
  margin-right: 12rpx;
}

.btn-arrow {
  color: #ffffff;
  font-size: 28rpx;
  font-weight: 600;
  animation: arrow-move 1.5s ease-in-out infinite;
}

@keyframes arrow-move {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8rpx); }
}

/* 已完成状态样式 */
.completed-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 40rpx;
  position: relative;
  z-index: 2;
  cursor: pointer;
  transition: transform 0.3s ease;

  &:active {
    transform: scale(0.98);
  }
}

.completed-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
  animation: celebrate 2s ease-in-out infinite;
}

@keyframes celebrate {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.1) rotate(-5deg); }
  50% { transform: scale(1.2) rotate(0deg); }
  75% { transform: scale(1.1) rotate(5deg); }
}

.completed-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 12rpx;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
  text-align: center;
}

.completed-subtitle {
  font-size: 28rpx;
  color: rgba(255,255,255,0.8);
  margin-bottom: 40rpx;
  text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.2);
  text-align: center;
}

.category-btn {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
  padding: 20rpx 40rpx;
  border-radius: 50rpx;
  box-shadow: 0 8rpx 24rpx rgba(250, 177, 160, 0.4);
  transition: all 0.3s ease;

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 4rpx 12rpx rgba(250, 177, 160, 0.4);
  }

  .btn-text {
    color: #2d3436;
    font-size: 30rpx;
    font-weight: 600;
    margin-right: 12rpx;
  }

  .btn-arrow {
    color: #2d3436;
    font-size: 28rpx;
    font-weight: 600;
    animation: arrow-move 1.5s ease-in-out infinite;
  }
}

.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  position: relative;
  z-index: 2;
}

.status-title {
  display: flex;
  align-items: center;

  .title-icon {
    font-size: 32rpx;
    margin-right: 12rpx;
  }

  .title-text {
    font-size: 32rpx;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
  }
}

.progress-percentage {
  font-size: 28rpx;
  font-weight: 700;
  color: #ffffff;
  background: rgba(255,255,255,0.2);
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  backdrop-filter: blur(10rpx);
}

.status-progress {
  margin-bottom: 40rpx;
  position: relative;
  z-index: 2;
}

.progress-bar {
  height: 8rpx;
  background: rgba(255,255,255,0.3);
  border-radius: 4rpx;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%);
  border-radius: 4rpx;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
    animation: progress-shine 2s ease-in-out infinite;
  }
}

@keyframes progress-shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.stages-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30rpx;
  position: relative;
  z-index: 2;
}

.stage-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;

  &.completed {
    .stage-circle {
      background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
      color: #ffffff;
      transform: scale(1.1);
      box-shadow: 0 4rpx 16rpx rgba(79, 172, 254, 0.4);
    }

    .stage-name {
      color: #ffffff;
      font-weight: 600;
    }
  }

  &.current {
    .stage-circle {
      background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
      color: #2d3436;
      animation: pulse 2s ease-in-out infinite;
      box-shadow: 0 4rpx 16rpx rgba(250, 177, 160, 0.4);
    }

    .stage-name {
      color: #ffeaa7;
      font-weight: 600;
    }
  }
}

@keyframes pulse {
  0%, 100% { transform: scale(1.1); }
  50% { transform: scale(1.2); }
}

.stage-circle {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: 600;
  margin-bottom: 12rpx;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10rpx);
  border: 2rpx solid rgba(255,255,255,0.2);
}

.check-icon {
  font-size: 28rpx;
  font-weight: 700;
}

.stage-number {
  font-size: 24rpx;
  font-weight: 600;
}

.stage-name {
  font-size: 22rpx;
  color: rgba(255,255,255,0.9);
  text-align: center;
  line-height: 1.3;
  transition: all 0.3s ease;
  text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.2);
}

.stage-line {
  position: absolute;
  top: 30rpx;
  left: calc(50% + 30rpx);
  width: calc(100% - 60rpx);
  height: 2rpx;
  background: rgba(255,255,255,0.3);
  z-index: -1;
}

.status-tips {
  position: relative;
  z-index: 2;
}

.tip-item {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.15);
  padding: 20rpx 24rpx;
  border-radius: 16rpx;
  backdrop-filter: blur(10rpx);
  border: 1rpx solid rgba(255,255,255,0.2);
}

.tip-icon {
  font-size: 28rpx;
  margin-right: 12rpx;
}

.tip-text {
  font-size: 26rpx;
  color: #ffffff;
  line-height: 1.4;
  text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.2);
}



/* 响应式适配 */
@media (max-width: 750rpx) {
  .stage-name {
    font-size: 20rpx;
  }

  .stage-circle {
    width: 50rpx;
    height: 50rpx;
  }

  .tip-text {
    font-size: 24rpx;
  }
}
</style>
